<template>
    <template v-for="item in options">
        <template v-if="item.children.length == 0">
           <el-menu-item :index="item.id" :route="item.route_name" @click="setTags(item.id,item.route_name,item.menu_name)">
              <el-icon><Grid /></el-icon>{{item.menu_name}}
          </el-menu-item>
        </template>
        <el-sub-menu v-else :index="item.id">
          <template #title>
            <el-icon><location /></el-icon>
            <span>{{ item.menu_name }}</span>
          </template>
          <m-Tree :options="item.children" />
        </el-sub-menu>
    </template>
</template>
<script>
export default{
    name:'mTree'
}
</script>
<script setup>
import { onMounted, reactive } from 'vue';
import {useStore} from 'vuex'

const store = useStore()
const props = defineProps({
    options:{
      type:Array,
      default:()=>{
        return [];
      }
    },
})
const setTags = (id,routeStr,tagName)=>{
  let tags = store.state.tags;
  let exist = false;
  tags.forEach((v,k)=>{
    if(v.id == id){
      exist = true;
      v.active = true;
    }else{
      v.active = false;
    }
  })
  if(!exist){
    tags.push({
      id:id,
      name:tagName,
      route:routeStr,
      canClose:true,
      active:true,
    });
  }
  store.commit('updateState',['activeMenuId',id]);
  store.commit('updateState',['tags',tags]);
}
</script>
<style lang="scss" scoped>

</style>